<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS列表和表格相关属性</title>
<style type="text/css">
#one{
	list-style-image:url("引用文件/1.ico");		/*图片作为列表的排序*/
	list-style-position:inside;
	
	/*
	上述可以将代码量简化为:
	list-style:url("引用文件/1.ico") inside;
	*/
	
	/*其他的样式格式：
	list-style-type:upper-alpha;		大写字母		
		注意：因为list-style-image和list-style-type二者都是定义标签的开头)，所以不能同时出现，否则无效
	list-style-type:circle;		空心圆
	list-style-type:disc;		实心圆
	*/
}
#two{list-style:none;		/*表示去掉开头标签*/
}
#two li{
	/*background-image:url(引用文件/1.ico);
	background-repeat:no-repeat;		可简化为下面*/
	background:url("引用文件/1.ico") no-repeat;
	
	width:128px;
	height:128px;
	/*border:1px solid red;		边框的宽度、实线、红色*/
	padding-left:150px;		/*内容跟左边框的距离*/
}
#three{
	width:50%;
	height:100px;
	border:1px red solid;		/*只显示最外部边框*/
	border-spacing:20px；		/*内部单元格的边框间距*/
	/*border-collapse:collapse;		内部单元格的边框合并，注意：border-collapse是定义单元格合并（间距为0），同样border-spacing定义单元格间距，所以不能重复出现，否则无效*/	
	caption-side:bottom;		/*设置表格标题的位置*/
	empty-cells:hide;		/*隐藏空单元格*/
}
#three td{		/*选择器的嵌套*/
	border:1px red solid;		/*只显示内部单元格边框*/
	font-family:"仿宋";		/*字体*/
}
</style>
</head>

<body>
<h3>兴趣爱好</h3>
<ul id="one">
	<li>足球</li>
    <li>篮球</li>
    <li>网球</li>
</ul>

<h3>兴趣爱好</h3>
<ul id="two">
	<li>足球</li>
    <li>篮球</li>
    <li>网球</li>
</ul>
    <h2>
    	<font color="#FF0000">
        思考：<br />
        1.如何将图标整个缩小？<br />
    	2.如何将图标缩进？
        </font>
    </h2>
<hr />
<table id="three">
	<caption>我的表格</caption>		<!--表格的标题-->
    <tr>
    	<td>单元格1</td>
        <td>单元格2</td>
        <td>单元格3</td>
    </tr>
	<tr>
    	<td>单元格4</td>
        <td>单元格5</td>
        <td></td>
    </tr>
</table>
</body>
</html>
